<template>
	<custom-nav :showBackArrow="true" title="互动中心"></custom-nav>
	<view class="page-post" :style="pagePaddingTop">
		<template v-if="pageLoading">
			<view class="container-news">
				<view class="container-news-body">
					<scroll-view class="scview-news" scroll-y @scrolltolower="onScrollBottom">
						<view class="wrap-post" v-if="dataNews&&dataNews.length">
							<view v-for="(item,idx) in dataNews" :key="idx" class="item-post"
								@tap="handleToPostDetail(item)">
								<view class="post-title">
									<image class="avatar" :src="item.mid_table_remark_009==-1?'/static/default_avatar.png':item.mid_table_remark_009" mode="aspectFit"></image>
									<view class="u-flex-column">
										<view>{{ item.mid_table_remark_007 == -1 ? '用户' : item.mid_table_remark_007 }}</view>
										<view class="time">{{ formatDate(item.mid_table_remark_040) }}</view>
									</view>
								</view>
								<view class="post_content">
									<view class="post_content_text">
										{{ item.mid_table_remark_003 }}
									</view>
									<view v-if="item.mid_table_remark_005">
										<view class="one_image" v-if="item.mid_table_remark_005.length === 1"  @click.stop>
											<u--image @click="previewImg(item.mid_table_remark_005)" :width="564" :height="318" :radius="24" :src="item.mid_table_remark_005[0]">
											  <template v-slot:loading>
											    <u-loading-icon></u-loading-icon>
											  </template>
											</u--image>
										</view>
										<view v-else class="grid_image" @click.stop>
											<u-album :multipleSize="174" :space="12" :rowCount="3" :maxCount="9" :urls="item.mid_table_remark_005"></u-album>
										</view>
									</view>
								</view>
								<view class="action_area">
									<view class="flex_row">
										<view class="flex_row" @click.stop="openComment(item)">
											<image class="action_area_icon" src="/static/icon_post_comment.png" mode="w"></image>
											<view class="action_area_num">{{ item.save_data_001 }}</view>
										</view>
										<view class="flex_row" style="margin-left: 46rpx;" @click.stop="setPostLike(item)">
											<image v-if="item.save_data_003.length === 0" class="action_area_icon" src="/static/post/unLike.png" mode="aspectFit"></image>
											<image v-else class="action_area_icon" src="/static/post/like_selected.png" mode="aspectFit"></image>
											<view class="action_area_num">{{ item.save_data_002 }}</view>
										</view>
									</view>
									<image @click.stop="openReportModal(item)" style="width: 36rpx;height: 8rpx;"
										src="/static/more.png" mode="aspectFit"></image>
								</view>
							</view>
						</view>
						<view v-else class="box-empty">
							<image class="icon-none" src="/static/icon_none.png"></image>
							<view class="text-empty">暂无帖子数据，去看看别的吧！</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</template>

		<u-popup :show="visible" bgColor="transparent" mode="bottom">
			<view class="container-modal-report">
				<view class="box-bottom" @tap="visible = false">举报</view>
				<view class="box-bottom" style="border-top: 1rpx solid rgba(255,255,255,0.1);" @tap="visible = false">取消
				</view>
			</view>
		</u-popup>

		<view class="ball" @tap="handleToAdd">
			<image src="/static/paperPlane.png" mode="aspectFit" style="width: 49rpx;height: 48rpx;"></image>
		</view>
	</view>
	<custom-modal ref='refClearModal' v-model:visible='showLogin' content='您未登录,请先登录？' :showCancelButton='false'
		@clickCallback="toLogin"></custom-modal>
</template>

<script setup>
	import {
		ref,
		watch,
		nextTick
	} from "vue";
	import {
		onLoad,
		onShow,
		onUnload,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		showDecodeBase64,
		encodeBase64
	} from "@/utils/tool.js"
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"
	import CustomModal from "@/components/custom-modal/index.vue"
	import CustomNav from "@/components/custom-nav/index.vue"
	import {
		useUser
	} from "@/hooks/useUser.js"
	import {
		middleAPI
	} from "@/http/apis/middleAPI.js"
	import {
		showToast
	} from "../../utils/frameApi";
	import Base64 from "@/libs/js-base64/index.js"

	const userStore = useUser();
	let navHeightInfo = getNavHeightTop();
	const pagePaddingTop = ref({
		"paddingTop": navHeightInfo.navTotalHeight + 'px'
	})
	let userInfo = ref(null)


	let dataNews = ref([])

	// 加载帖子列表
	let newsCacheList = [];
	let page = ref(1);
	const pageSize = 10;
	let notMore = ref(false)
	const getPostList = async () => {
		let queryData = {
			invoke_method: "public_load_middle_table_list",
			pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
			type_middle_app: 62001,
			type_inner_app: 1001,
			is_online: 0,
			mid_table_remark_006: industryId.value, // 当前选中的话题Id
			pre_db_para_begin_idx: (page.value - 1) * pageSize,
			pre_db_para_length_4_list: pageSize,
			pre_cmd_para_show_main_info: "true",
			pre_cmd_para_show_answer_info: "true"
		}
		let response = await middleAPI(queryData).catch((err) => {
			let nextPage = page.value - 1;
			page.value = nextPage || 1;
		})
		if (response) {
			let result = response.page_content || [];
			if (result.length < pageSize) {
				notMore.value = true;
			}
			
			for(let i in result) {
				result[i].mid_table_remark_003 = showDecodeBase64(result[i].mid_table_remark_003)
				if(result[i].mid_table_remark_005) {
					result[i].mid_table_remark_005 = result[i].mid_table_remark_005.split('-_-')
				}
			}
			
			newsCacheList = newsCacheList.concat(result)
			dataNews.value = newsCacheList
		}
	}

	let pageLoading = ref(false)
	const industryId = ref(""); // 话题ID
	const industryName = ref(""); // 话题名称

	onLoad((options) => {
		industryId.value = options?.id || "";
		industryName.value = options.name ? decodeURIComponent(options.name) : '';
		if (!industryId.value) {
			uni.navigateBack();
		}
	})

	onShow(() => {
		userStore.getUserInfo().then(async res => {
			userInfo.value = res?.public_user_info || {};
			pageLoading.value = true
			newsCacheList = [];
			dataNews.value = []
			notMore.value = false;
			page.value = 1;
			if (industryId.value) getPostList();
		}, err => {

		})
	})
	let showLogin = ref(false)
	const goLogin = () => {
		if (!userInfo.value || !userInfo.value.id_public_user_info || userInfo.value.id_public_user_info == 92) {
			showLogin.value = true;
			return false;
		}
		return true
	}
	const toLogin = () => {
		showLogin.value = false;
		uni.reLaunch({
			url: "/pages/login/index"
		})
	}
	const onScrollBottom = () => {
		if (notMore.value) {
			return;
		}
		page.value += 1;
		getPostList()
	}

	// 进入动态详情
	const handleToPostDetail = (item) => {
		if (!item || !item.id_public_middle_table) {
			return;
		}
		if (!goLogin()) {
			return;
		}
		uni.navigateTo({
			url: `/pages/post/post-detai?id=${item.id_public_middle_table}`
		})
	}

	const handleToAdd = (item) => {
		uni.navigateTo({
			url: `/pages/post/addPost?id=${industryId.value}&name=${encodeURIComponent(industryName.value)}`
		})
	}
	
	const formatDate = (dateStr) => {
	    const year = dateStr.slice(0, 4);
	    const month = dateStr.slice(4, 6);
	    const day = dateStr.slice(6, 8);
	
	    return `${year}.${month}.${day}`;
	}

	// 举报
	const visible = ref(false);
	const reportForm = ref({})
	const openReportModal = (item) => {
		reportForm.value = item;
		visible.value = true;
	}
	
	function previewImg(urls) {
		uni.previewImage({
			urls
		})
	}
	
	// 点赞/取消点赞
	async function setPostLike(item) {
		if(item.save_data_003.length === 0) {
			// 点赞
			let queryParas = {
				invoke_method: "public_insert_or_update_middle_table",
				pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
				type_middle_app: 64001,
				type_inner_app: 1001,
				is_online: 0,
				id_public_user_info: item.id_public_user_info,
				mid_table_remark_015: item.id_public_middle_table,
				mid_table_remark_016: userInfo.value.id_public_user_info,
			}
			middleAPI(queryParas).then((res) => {
				const data = res.page_content[0]
				item.save_data_002++;
				item.save_data_003 = [data]
			}, err => {
				console.log(err)
			})
		}else {
			// 取消点赞
			let queryParas = {
				invoke_method: "public_insert_or_update_middle_table",
				pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
				is_online: 1,
				pre_db_para_id_public_middle_table: item.save_data_003[0].id_public_middle_table,
				type_middle_app: 64001,
				type_inner_app: 1001,
			}
			middleAPI(queryParas).then((res) => {
				item.save_data_002 = item.save_data_002 - 1;
				item.save_data_003 = []
			}, err => {
				console.log(err)
			})
		}
	}
	
	// 打开评论
	function openComment(item) {
		if (!item || !item.id_public_middle_table) {
			return;
		}
		if (!goLogin()) {
			return;
		}
		uni.navigateTo({
			url: `/pages/post/post-detai?id=${item.id_public_middle_table}&openComment=1`
		})
	}
</script>

<style lang="less" scoped>
	view {
		box-sizing: border-box;
	}

	.flex_row {
		display: flex;
		align-items: center;
	}

	.container-modal-report {
		position: relative;
		width: 100%;
		background: #213343;
		border-radius: 34rpx 34rpx 0rpx 0rpx;

		.box-bottom {
			position: relative;
			width: 100%;
			height: 136rpx;
			line-height: 136rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.page-post {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		background-color: #182836;
		box-sizing: border-box;

		.container-news {
			position: relative;
			width: 100%;
			height: 100%;
			box-sizing: border-box;

			.container-news-body {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				overflow: hidden;
			}

			.scview-news {
				position: relative;
				width: 100%;
				height: 100%;
				box-sizing: border-box;

				.wrap-post {
					position: relative;
					width: 100%;
					box-sizing: border-box;
					padding: 32rpx;

					.item-post {
						position: relative;
						background: #213343;
						border-radius: 32rpx;
						padding: 42rpx 30rpx 32rpx 34rpx;
						margin-bottom: 32rpx;
						width: 100%;
						display: flex;
						display: -webkit-flex;
						flex-direction: column;
						justify-content: space-between;

						.post-title {
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							margin-bottom: 28rpx;
							box-sizing: border-box;

							.avatar {
								width: 90rpx;
								height: 90rpx;
								border-radius: 50%;
								margin-right: 16rpx;
							}

							.time {
								margin-top: 12rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #B5B5B5;
							}
						}

						.post_content {
							width: 100%;
							padding: 32rpx 29rpx;
							font-size: 30rpx;
							font-weight: 400;
							color: #00FFF6;
							box-sizing: border-box;
							background: #182836;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							opacity: 1;
							border: 1rpx solid rgba(255, 255, 255, 0.2);
							margin-bottom: 24rpx;
							
							&_text {
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 4;
								-webkit-box-orient: vertical;
							}
							
							.one_image {
								margin-top: 20rpx;
							}

							.grid_image {
								margin-top: 20rpx;
								
								/deep/ image {
									border-radius: 16rpx;
								}
							}
						}

						.action_area {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}

						.action_area_icon {
							width: 28rpx;
							height: 28rpx;
							margin-right: 7rpx;
						}

						.action_area_num {
							font-size: 20rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}

				.box-empty {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					-webkit-transform: translate(-50%, -50%);

					.icon-none {
						position: relative;
						width: 326rpx;
						height: 326rpx;
						margin: 64rpx auto;
						vertical-align: top;

					}

					.text-empty {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 48px;
						width: 326rpx;
						text-align: center;
						overflow: visible;
						opacity: 0.5;
						white-space: nowrap;
						text-indent: -1rem;
						margin-top: -2rem;
					}
				}
			}
		}

		.tabbar-border {
			position: fixed;
			width: 100%;
			height: 2px;
			background: #00FFF6;
			bottom: 0;
			z-index: 3;
		}
	}

	.ball {
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
		box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(255, 255, 255, 0.3);
		opacity: 1;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 32rpx;
		bottom: 70rpx;
	}
</style>